.sign {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: $black;

  &__panel {
    display: flex;
    flex-direction: column;
    width: 400px;
    padding: 20px;
    background-color: $white;
    border-radius: 4px;
    box-shadow: 2px 2px 8px $silver;
  }

  &__title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.6rem;
    color: $black-extra-light;
  }

  &__item {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 1.6rem;
  }

  &__box {
    position: relative;
  }

  &__input {
    box-sizing: border-box;
    width: 100%;
    height: 2.4rem;
    line-height: 2.4rem;
    border-radius: 4px;
    padding: 0 10px 0 1.8rem;
    font-size: 1.2rem;
    transition: all .3s;
  }

  &__input:focus {
    border-color: $silver;
  }

  &__input-icon {
    position: absolute;
    top: .6rem;
    left: .4rem;
    font-size: 1.2rem;
  }

  &__tips {
    position: absolute;
    left: 0;
    bottom: .6rem;
    font-size: .875rem;
    color: $danger-color;
  }

  &__btn {
    text-align: center;
    font-size: 1.2rem;
    padding: .7rem 0;
    background-color: $black-extra-light;
    color: $white;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s;
  }

  &__btn:hover {
    background-color: $black-light;
    color: $white;
  }

  &__btn:active {
    background-color: $black;
  }
}
